import React from 'react';
import { Input, Tree, Row, Col, Radio } from 'antd';
import config from '../../config/config';

const { Search } = Input;

const LimitRelateTree = (props) => {

  const {
    bizType, correlateType, limitList, onRadioChange, onSearchCompany, onSelectTreeNode
  } = props;

  const generateTreeData = (correlateType, limitList) => {
    buildCompanyTree(correlateType, limitList);
    return limitList;
  }
  const buildCompanyTree = (correlateType, limitList) => {
    for (let i = 0; i < limitList.length; i++) {
      const record = limitList[i];
      record.key = record.longCode;
      let value = record.targetName ? record.targetName : record.name;
      let unitTypeObj = config.UNIT_TYPE.find(item => item.key == record.type) || {};
      record.title =
        <div>
          <span style={{ background: unitTypeObj.color }}>{unitTypeObj.value}</span>
          <span style={{ marginLeft: 10 }}>{value}</span>
        </div>;

      let children = record.children;
      if (children) {
        buildCompanyTree(correlateType, children);
      }
    }
  }

  const relateTypes = "0,1,6".includes(correlateType) ? config.RELATE_TYPE.slice(0, 3) : config.RELATE_TYPE.slice(3, 6);

  return (
    <div id={"limitRelateTree_" + new Date().getTime()}>
      <Row style={{ padding: "0px 0px 10px 5px", display: bizType == "authorize" ? "none" : "flex" }}>
        <Col span={6}>类型：</Col>
        <Col span={18}>
          <Radio.Group onChange={onRadioChange} value={correlateType}>
            {
              relateTypes.map(item => <Radio value={item.key}>{item.value}</Radio> )
            }
          </Radio.Group>
        </Col>
      </Row>
      <Row style={{ padding: "0px 0px 15px 0px" }}>
        <Search placeholder="请输入名称" onSearch={onSearchCompany} enterButton style={{ width: "95%" }} />
      </Row>
      <Tree
        style={{ height: window.innerHeight - 100, overflowY: "scroll" }}
        defaultExpandAll={true}
        onSelect={onSelectTreeNode}
        treeData={generateTreeData(correlateType, limitList)}
      />
    </div>
  );
};

export default LimitRelateTree;
